<template>
	<!-- 其他服务 -->
	<section class="item search-wrap">
		<section class="title">
			<text class="header-line">
				<text class="header-title">其他服务</text>
			</text>
		</section>
		<view class="flex-wrap">
			<a class="flex-item txt-center" href="">
				<view class="iconfont">&#xe887;</view>
				<p class="name">气象信息</p>
			</a>
			<a class="flex-item txt-center" href="">
				<view class="iconfont">&#xe617;</view>
				<p class="name">空气指数</p>
			</a>
		</view>
	</section>
</template>

<script>
</script>

<style>
    @import '/static/css/reset.css';
	.search-wrap {
		margin-top: 0.8rem;
	    background: #fff;
	}
	
	.search-wrap .title {
	    border-bottom: 1px solid #f6f6f6;
	    margin-bottom: 2rem;
	    font-size: 1rem !important;
	}
	
	.title {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    width: 100%;
	    white-space: nowrap;
	    padding: 1.3rem 1.1rem;
	}
	
	.title .header-title {
	    vertical-align: middle;
		padding: 0 1rem;
	    border-left: 3px solid #03ABF7;
	}
	
	.search-wrap .flex-wrap {
	    flex-flow: row wrap;
	    display: flex;
	}
	
	.item .flex-wrap .flex-item {
	    width: 33%;
	    flex: 0 1 auto;
	    margin-bottom: 2rem;
	    -webkit-box-flex: 1;
	}
	
	.txt-center {
	    text-align: center;
	}
	
	.search-wrap .flex-wrap .iconfont {
	    font-size: 30px;
	    color: #000;
	}
	
	.item .name {
		font-size: 14px;
	    color: #03abf7;
	    margin-top: 0.8rem;
	}
</style>
